<template>
  <div>
      <div>
        <van-sidebar v-model="activeKey" style="float:left">
          <van-sidebar-item v-for="item in rootList" :key="item.id"
            :title="item.name"
            @click="selectRootCategory(item.id)"/>
        </van-sidebar>
        <van-grid class="grid" :column-num="3" :border="false">
          <van-grid-item v-for="item in currentSubList" :key="item.id">
            <router-link :to="{name:'categoryList',query:{id:item.id}}">
              <div class="images">
                <img :src="item.img" class="imgs">
              </div>
              <div>{{item.name}}</div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </div>
      <navBar></navBar>
  </div>
</template>

<script>

export default {
  props: {
  },
  components: {

  },
  data() {
    return {
      rootList:[],
      allSubList:[],
      currentSubList:[],
      activeKey:0
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getAllCategory()
  },
  methods: {
    getAllCategory(){
      this.$http.get('/api/category/all').then(
        response=>{
          console.log('Category',response.data)
          this.rootList=response.data.roots
          this,this.allSubList=response.data.subs
          this.selectRootCategory(this.rootList[0].id)
        },
        error=>{
          console.log('Category',error.msg)
        }
      )
    },
    selectRootCategory(rootId){
      console.log(this.allSubList)
      this.currentSubList=this.allSubList.filter((item)=>
        item.parentId===rootId
      )
      console.log('Category',this.currentSubList)
    }
  },
};
</script>
<style scoped lang="less">
.images{
  height: 60px;
  
}
.images img{
    max-width: 60px;
    max-height: 50px;
  }
a{
  text-decoration: none;
  color: black;
}
.grid{
  padding-top: 13px;
  margin: 5px 5px;
  height: 140px;
}
</style>